import React from "react";

const WelcomeComponent: React.FC = () => {
  return (
    <div className="flex-1 flex items-center justify-center bg-gradient-to-r from-blue-50 to-purple-50">
      <div className="text-center p-5 rounded-lg shadow-md bg-white bg-opacity-80 transform hover:scale-102 transition-all duration-300 border border-gray-200 max-w-md">
        <h2 className="text-xl font-bold mb-3 text-gray-800">欢迎使用 X-Chat</h2>
        <p className="text-sm text-gray-600 mb-4">一个现代化的即时通讯应用</p>
        <div className="flex justify-center space-x-3 mb-4">
          <div className="text-center">
            <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-1">
              <span className="text-xl">💬</span>
            </div>
            <p className="text-xs text-gray-700">即时消息</p>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-1">
              <span className="text-xl">👥</span>
            </div>
            <p className="text-xs text-gray-700">好友互动</p>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-1">
              <span className="text-xl">🔒</span>
            </div>
            <p className="text-xs text-gray-700">隐私保护</p>
          </div>
        </div>
        <p className="text-xs text-gray-500 italic">从左侧导航开始探索吧！</p>
      </div>
    </div>
  );
};

export default WelcomeComponent; 